<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-29 17:42:28
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-21 15:40:46
 * @FilePath: /vue3-uniapp/src/components/ui/WyyFilterDropdown/WyyFilterDropdown.vue
-->

<script lang="ts" setup>
import DropdownList from './components/DropdownList.vue';

interface DropdownListItem {
    value: string | number | boolean | undefined;
    label: string;
}
interface DropdownBtn {
    name: string;
    list: DropdownListItem[];
}

const props = withDefaults(
    defineProps<{
        dropdownList: DropdownBtn[];
        modelValue: (string | number | boolean | undefined)[];
        viewHeight?: string;
        bgColor?: string;
        nameColor?: string;
        nameSize?: string;
        labelColor?: string;
        labelSize?: string;
        activeColor: string;
    }>(),
    {
        modelValue: () => [] as (string | number | boolean | undefined)[],
        viewHeight: '80rpx',
        bgColor: 'var(--bg-front)',
        nameColor: 'var(--c-text)',
        nameSize: 'var(--text-sm)',
        labelColor: 'var(--c-text2)',
        labelSize: 'var(--text-sm)',
        activeColor: 'var(--c-primary)'
    }
);

const emits = defineEmits<{
    (
        event: 'update:model-value',
        value: (string | number | boolean | undefined)[]
    ): void;
    (event: 'confirm', value: (string | number | boolean | undefined)[]): void;
}>();

const {
    dropdownList,
    modelValue,
    viewHeight,
    bgColor,
    nameColor,
    nameSize,
    labelColor,
    labelSize,
    activeColor
} = toRefs(props);

const maskShow = ref(false);

const handleClick = (index: number) => {
    maskShow.value = index !== -1;
};

const listRef = ref<typeof DropdownList>();
</script>

<template>
    <view class="wyyfilterdropdown-container">
        <view class="container">
            <DropdownList
                ref="listRef"
                :dropdownList="dropdownList"
                :viewHeight="viewHeight"
                :bgColor="bgColor"
                :nameColor="nameColor"
                :nameSize="nameSize"
                :labelColor="labelColor"
                :labelSize="labelSize"
                :activeColor="activeColor"
                @click-btn="(index) => handleClick(index)"
                :model-value="modelValue"
                @update:model-value="
                    (value) => {
                        emits('update:model-value', value);
                        emits('confirm', value);
                        maskShow = false;
                    }
                "
            />
        </view>
        <view
            class="mask"
            :class="{ active: maskShow }"
            @click="
                () => {
                    maskShow = false;
                    listRef?.close();
                }
            "
        />
    </view>
</template>

<style lang="scss" scoped>
.wyyfilterdropdown-container {
    .container {
        border-bottom: 1px solid #eeeeee;
    }
    .mask {
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        opacity: 0;
        transition: opacity 2s linear;
        display: none;
        &.active {
            display: block;
            opacity: 0.3;
        }
    }
}
</style>
